<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>高级查询</legend>
    </fieldset>

    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手办名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="orderDoSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="cardTableId" lay-filter="caedTable"></table>
    <!-- 按钮 -->
    <div style="display: none" id="userbarDemo" type="text/html">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
        {{# if(d.orderState == 0){ }}
        <a class="layui-btn layui-btn-sm" lay-event="deliver">发货</a>
        {{# } }}
    </div>

    <script>
        layui.use(['jquery', 'layer', 'table', 'form', 'config'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var config = layui.config;
            form.render();
            // 表格渲染
            table.render({
                elem: '#cardTableId',
                id: 'card'
                , url: config.base_server + 'getCardList'
                , cellMinWidth: 80
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', title: '订单编号', sort: true, minWidth: 100 }
                    , { field: 'username', title: '用户名称', minWidth: 100 }
                    , {
                        field: 'orderState', title: '订单状态', minWidth: 100, templet: function (d) {
                            let str = "未发货"
                            if (d.orderState == 0) {
                                str = "未发货"
                            } else if (d.orderState == 1) {
                                str = "已发货"
                            } else if (d.orderState == 2) {
                                str = "已收货"
                            } else if (d.orderState == 3) {
                                str = "退货"
                            }
                            return str
                        }
                    }
                    , { field: 'sum', title: '手办价格', minWidth: 100 }
                    , {
                        field: 'comm', title: '手办价格', minWidth: 100,
                        templet: function (d) {
                            let str = d.comm.reduce(function (prev, cur, index, arr) {
                                if (index == 0) {
                                    return cur.name + ":" + cur.number
                                }
                                return prev + "--" + cur.name + ":" + cur.number
                            }, '')
                            return str
                        }
                    }
                    , { title: '操作', toolbar: '#userbarDemo' }
                ]]
                , page: true //开启分页
                , skin: 'row' //行边框风格
                , even: true //开启隔行背景
                , size: 'lg' //小尺寸的表格
            });

            //行内按钮事件的监听
            table.on('tool(caedTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    var editId = data.id;
                    layer.confirm('真的删除该订单吗?', function (index) {
                        $.ajax({
                            type: "GET",
                            url: config.base_server + "DeleteCardById",
                            data: { id: editId },
                            dataType: "json",
                            success: (data) => {
                                if (data.code) {
                                    obj.del();
                                    // table.reload('card');
                                    layer.msg('删除成功', {
                                        icon: 1
                                    });
                                    layer.close(index);
                                } else {
                                    alert(data.info);
                                }
                            }
                        });
                    });
                } else if (obj.event === 'deliver') {
                    var editId = data.id;
                    layer.confirm('是否发货该订单吗?', function (index) {
                        $.ajax({
                            type: "GET",
                            url: config.base_server + "DeliverCardById",
                            data: { id: editId },
                            dataType: "json",
                            success: (data) => {
                                if (data.code) {
                                    table.reload('card');
                                    layer.msg('发货成功', {
                                        icon: 1
                                    });
                                } else {
                                    alert(data.info);
                                }
                            }
                        });
                    });
                }
            });

            $('#orderDoSearch').on('click', function () {
                var name = $("input[name='name']").val();
                table.reload('card', {
                    url: config.base_server + 'getCardList' //数据接口
                    , where: { name: name }
                });
            });

            //重置：待解决刷新问题 
            $('#doReset').on('click', function () {
                location.reload();
            });
        });

    </script>

</body>